﻿@page
@{ Layout = "_Layout"; }
@section Styles{
<style>
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin: 0;
    }
</style>
}
<el-card>
    <el-form :inline="true" :model="form" :size="euiSize">
        <el-form-item label="">
            <el-input v-model="form.keyword" placeholder="搜索文件" prefix-icon="el-icon-search" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button-group>
                <el-button icon="el-icon-search" type="primary" v-on:click="btnSearchClick">查询</el-button>
                <el-button plain icon="el-icon-plus" v-on:click="btnGroupAddClick" type="primary">
                    新建文件夹
                </el-button>
                <el-button plain icon="el-icon-upload" type="primary" v-on:click="btnUploadMore">
                    上传文件
                </el-button>
                <el-button type="danger" icon="el-icon-delete" plain v-on:click="btnDeleteMoreClick">
                    批量删除
                </el-button>
            </el-button-group>
        </el-form-item>
    </el-form>
    <div style="height:18px;"></div>
    <el-table ref="fileTable"
              :data="list"
              :size="euiSize"
              border
              :height="$(window).height()-113"
              v-on:cell-mouse-enter="mouseoverShowIn"
              v-on:cell-mouse-leave="mouseoverShowOut">
        <el-table-column>
            <template slot="header" slot-scope="scope">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="path in paths" :to="{  }" v-on:click.native="breadcrumbPath(path.id)">{{path.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
            <el-table-column type="index" label="#"
                             width="60">
            </el-table-column>
            <el-table-column type="selection" :selectable="fileTableSelectable"
                             width="40">
            </el-table-column>
            <el-table-column label="文件夹/文件" sortable sort-by="title">
                <template slot-scope="scope">
                    <el-link :underline="false" v-if="scope.row.type==='Group'" v-on:click="btnTitleClick(scope.row)" type="primary" icon="el-icon-folder-opened">{{ scope.row.name }}</el-link>
                    <span v-else>
                        <span class="margin-left:9px;">{{ scope.row.name }}</span>
                    </span>
                    <div style="float:right;" v-if="scope.row.id===curMouseoverId && scope.row.type===curFileType">
                        <el-link :underline="false" v-if="scope.row.type!=='Group'" v-on:click.stop="btnView(scope.row.id)" type="primary" size="mini" icon="el-icon-view" style="font-size:12px;">预览</el-link>
                        <el-divider direction="vertical" v-if="scope.row.type!=='Group'"></el-divider>
                        <el-link :underline="false" v-if="scope.row.type!=='Group'" v-on:click.stop="btnDownloadClick(scope.row.id)" type="primary" size="mini" icon="el-icon-download" style="font-size:12px;">下载</el-link>
                        <el-divider direction="vertical" v-if="scope.row.type!=='Group'"></el-divider>
                        <el-link :underline="false" v-if="scope.row.type==='Group'" v-on:click.stop="btnEditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit" style="font-size:12px;">重命名</el-link>
                        <el-divider direction="vertical" v-if="scope.row.type==='Group'"></el-divider>
                        <el-link :underline="false" v-on:click.stop="btnDeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete" style="font-size:12px;">删除</el-link>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="fileType" sortable
                             label="类型"
                             width="120">
            </el-table-column>
            <el-table-column prop="size" sortable
                             label="时长"
                             width="120">
                <template slot-scope="scope"><span v-if="scope.row.type==='File'">{{ utils.formatDuration(scope.row.duration) }}</span></template>
            </el-table-column>
            <el-table-column prop="size" sortable
                             label="大小"
                             width="120">
                <template slot-scope="scope">{{ utils.formatFileSize(scope.row.size) }}</template>
            </el-table-column>
            <el-table-column prop="dateTimeStr" sortable align="right"
                             label="修改时间"
                             width="150">
            </el-table-column>
        </el-table-column>
        @await Html.PartialAsync("_PartialTableEmpty")
    </el-table>
</el-card>
@section Scripts{
<script src="/sitefiles/assets/js/admin/study/studyCourseFiles.js" type="text/javascript"></script>
 }
